<template>
    <div class="list" ref="wrapper">
        <div>
            <div class="area">
                <div class="title">当前城市</div>
                <ul class="item-local">
                    <span class="item-list-local">
                        {{this.fillterCityname}}
                    </span>
                </ul>
            </div>
            <div class="area">
                <div class="title">热门城市</div>
                <ul class="item">
                    <li class="item-list" @click="handleCityClick(item.name)" v-for="item of hotCitylist" :key="item.id">
                        {{item.name}}
                    </li>
                </ul>
            </div>
            <div class="area">
                <div class="title">字母排序</div>
                <ul class="character">
                    <li class="character-list" @click="hadelClick" v-for="(item,key) of citylist" :key="key">{{key}}</li>
                </ul>
            </div>
            <div class="area" :ref="key" v-for="(item,key) of citylist" :key="key">
                <div class="title">{{key}}</div>
                <ul class="item character-city">
                    <li class="item-list" @click="handleCityClick(innerItem.name)" v-for="innerItem of item" :key="innerItem.id">
                        {{innerItem.name}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
import { mapMutations, mapState, mapGetters } from 'vuex'
export default {
  name: 'HeaderList',
  computed: {
    ...mapState(['city']),
    ...mapGetters(['fillterCityname'])
  },
  props: {
    citylist: Object,
    hotCitylist: Array,
    letterA: String
  },
  data() {
    return {
      letter: ''
    }
  },
  methods: {
    hadelClick(e) {
      this.letter = e.target.innerText
      if (this.letter) {
        this.scroll.scrollToElement(this.$refs[this.letter][0])
      }
    },
    handleCityClick(cityname) {
      this.changeCity(cityname)
      this.$router.push({path: '/'})
    },
    ...mapMutations(['changeCity'])
  },
  watch: {
    letterA() {
      if (this.letterA) {
        this.scroll.scrollToElement(this.$refs[this.letterA][0])
      }
    }
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper, {click: true, tap: true})
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixin.styl'
@import '~styles/varibles.styl'
  .list
    position absolute
    top 1.40rem
    left 0
    right 0
    bottom 0
    overflow hidden
    background $bgBodyColor
    .area
      overflow hidden
      .title
        font-size .24rem
        margin .24rem .3rem
      .item
        &:before
          before()
          width 33.3%
          left 33.3%
        position relative
        background $bgColorFff
        overflow hidden
        .item-list
          ellipsis()
          position relative
          z-index 2
          float left
          margin-bottom: -3px;
          width 33.3%
          font-size .28rem
          height .9rem
          line-height .9rem
          text-align center
          border-bottom 1px solid #ddd
      .character
        background $bgColorFff
        padding .3rem 0
        overflow hidden
        .character-list
          float left
          width 16.6%
          height .9rem
          line-height .9rem
          text-align center
      .character-city
        &:before
          before()
        &:after
          after()
          border-right 0
        .item-list
          width 25%
      .item-local
        background #ffffff
        height .88rem
        line-height .88rem
        .item-list-local
          display inline-block
          padding 0 .4rem
          height .52rem
          line-height .52rem
          text-align center
          border-radius .3rem
          margin-left .24rem
          border 1px solid #ddd
</style>
